<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECMAScript Arguments</title>
    <script>
        /*
        一、实现重载
        我们都知道，在JavaScript中并没有函数重载的功能，但是Arguments对象能够模拟重载，
        比如，最简单的一种方式，根据参数的个数进行重载。如下图
        */
        function demo(){
            switch(arguments.length){
                case 0:
                console.log(0);
                break;
                case 1:
                console.log(1);
                break;
                case 2:
                console.log(2);
                break;
                case 3:
                console.log('default');
                break;
            }
        }

        function testDemo(){
            demo()
            demo('hello')
            demo('hello',2)
            demo(1,2,3)
            
        }
        /*
        二、同数组下标访问实参
            JavaScript中每个函数都会有一个Arguments对象的实例arguments，
            它引用着函数的实参，而且可以用数组下标的方式来引用arguments的元素。如下图
        */
        function demoTwo(){
            var html = '';
            for (var i = 0; i<arguments.length;i++){
                html += arguments[i] + ':'
            }
            console.log(html)
        }

        function testDemoTwo(){
            demoTwo("Hello")
            demoTwo("Hello","DeLong")
        }

        /*
        三、属性callee指向自己
            对象都是有自己的属性和方法的，Arguments对象也是一样，callee就是它的方法，这个方法用的不多，
            很容易被我们忽略，它指向的是正在被执行的Function对象，最常用的例子就是用来做递归了。如下图
        */

        /*
        在native 当中 反复的使用递归会造成 
        */
        function sum(n){
            if (n == 1){
                return 1;
            }else{
                return n + arguments.callee(n-1)
            }
        }

        function testSum(){
            console.log(sum(6))    // 实现 6+5+4+3+2+1 的操作 
            console.log(sum(5))   // 5+4+3+2+1   的操作 
        }

    </script>
</head>
<body>
    <button onclick="testDemo()">测试实现重载</button>
    <button onclick="testDemoTwo()">测试实现重载</button>
    <button onclick="testSum()">测试实现重载</button>
</body>
</html>